<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>监控中心用户注册</title>

    <!-- Bootstrap Core CSS -->
    <link href="${request.getContextPath()}/public/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="${request.getContextPath()}/public/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="${request.getContextPath()}/public/dist/css/sb-admin-2.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="${request.getContextPath()}/public/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet"
          type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

<div class="container">

    <#if err_msg??>
        <div class="alert alert-danger">
            ${err_msg}
        </div>
    </#if>

    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">监控中心用户注册</h1>
        </div>
        <!-- /.col-lg-12 -->
    </div>
    <!-- /.row -->
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-3"></div>
                        <div class="col-lg-6">
                            <form role="form" method="post" action="${request.getContextPath()}/submitRegist.do" onsubmit="return checkFormValue(this);">
                                <div class="form-group">
                                    <label>登录账号</label>
                                    <input class="form-control" name="account" required autofocus>
                                </div>
                                <div class="form-group">
                                    <label>登录密码</label>
                                    <input class="form-control" name="password" type="password" required>

                                    <p class="help-block">请输入6-12位登录密码.</p>
                                </div>

                                <div class="form-group">
                                    <label>重复密码</label>
                                    <input class="form-control" name="rePassword" type="password" required>

                                    <p class="help-block">请重复输入您的的登录密码.</p>
                                </div>

                                <div class="form-group">
                                    <label>真实姓名</label>
                                    <input class="form-control" name="realName" type="text" required>
                                </div>

                                <div class="form-group">
                                    <label>手机号码</label>
                                    <input class="form-control" name="phone" type="number" required>
                                </div>

                                <div class="form-group">
                                    <label>验证码
                                        <input class="form-control" name="code" type="text" required>
                                    </label>
                                    <img src="./kaptcha/image.do" id="kaptchaImage" style="margin-bottom: -3px;" alt="点击更换"/>
                                </div>

                                <div class="form-group">
                                    <label class="checkbox-inline">
                                        <input name="pact" type="checkbox" checked="true"> <a href="#">同意用户协议</a>
                                    </label>
                                </div>

                                <button type="submit" class="btn btn-success">立即注册</button>
                                <button type="reset" class="btn btn-warning">重新输入</button>
                            </form>
                        </div>
                        <!-- /.col-lg-6 (nested) -->

                        <!-- /.row (nested) -->
                    </div>
                    <!-- /.panel-body -->
                </div>
                <!-- /.panel -->
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
    </div>

    </div>

<!-- jQuery -->
<script src="${request.getContextPath()}/public/vendor/jquery/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="${request.getContextPath()}/public/vendor/bootstrap/js/bootstrap.min.js"></script>

<!-- Metis Menu Plugin JavaScript -->
<script src="${request.getContextPath()}/public/vendor/metisMenu/metisMenu.min.js"></script>

<!-- Custom Theme JavaScript -->
<script src="${request.getContextPath()}/public/dist/js/sb-admin-2.js"></script>

<script>

    //点击切换验证码
    $('#kaptchaImage').click(function () {
        $(this).hide().attr('src', './kaptcha/image.do?' + Math.floor(Math.random()*100) ).fadeIn();
        event.cancelBubble=true;
    });


    function checkFormValue(form){

        //检查密码长度（6-12 位）
        var password = form.password.value;

        if(password.length<6 || password.length>12){

            alert("密码长度为 6-12 位");

            return false;
        }


        //检查2次密码是否一样
        if(form.password.value!=form.rePassword.value){

            alert("两次输入的密码不同");

            return false;
        }

        //检查手机号码格式
        if(!(/^1[3|4|5|7|8]\d{9}$/.test(form.phone.value))){

            alert("手机号码有误，请重填");
            return false;
        }


        //检查用户协议是否勾选
        if(!form.pact.checked){

            alert("请选择同意用户协议");

            return false;
        }

        return true;
    }


</script>


</body>

</html>
